<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="欢迎来到米修在线">
        <meta name="keywords" content="前端学习">
        <link rel="stylesheet" href="css/style.css">
        <!--   引入font图标样式     -->
        <link rel="stylesheet" href="css/font-awesome.min.css">
        <title>米修在线 | 首页</title>
    </head>

    <body>
        <!-- <header> 标签定义文档的页眉（介绍信息）。 -->
        <header>
            <!-- <nav> 标签定义导航链接的部分。 -->
            <nav id="navbar">
                <h1><a href="index.html">米修在线</a></h1>
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="about.html">关于我们</a></li>
                    <li><a href="contact.html">联系我们</a></li>
                </ul>
            </nav>
            <div id="showcase">
                <div class="container">
                    <div class="showcase-content">
                        <h1>欢迎来到&nbsp;&nbsp;<span class="text-primary">米修在线</span></h1>
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit molestiae praesentium
                            adipisci at illo
                            nobis omnis, alias dolorum cum quis, unde voluptas officia reprehenderit? Inventore cumque
                            architecto sequi
                            minima ab!</p>
                        <a class="btn" href="about.html">关于我们</a>
                    </div>
                </div>
            </div>
        </header>
        <!-- <section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。 -->
        <section id="home-info" class="bg-dark">
            <div class="info-img"></div>
            <div class="info-content">
                <h2><span class="text-primary">米修在线</span>介绍</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum nihil necessitatibus recusandae enim
                    vitae sit
                    ipsa, consequuntur distinctio maxime eum blanditiis nobis tempore labore ipsam fugiat ullam totam
                    expedita
                    quaerat?</p>
                <a class="btn btn-light" href="about.html">阅读更多</a>
            </div>
        </section>
        <section id="features">
            <div class="box bg-light">
                <!--   引入小图标 -->
                <i class="fa fa-users fa-3x"></i>
                <h3>讲师介绍</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum nihil necessitatibus recusandae enim
                    vitae sit
                    ipsa, consequuntur distinctio maxime eum blanditiis nobis tempore labore ipsam fugiat ullam totam
                    expedita
                    quaerat?</p>
            </div>
            <div class="box bg-primary">
                <!--   引入小图标 -->
                <i class="fa fa-users fa-3x"></i>
                <h3>课程详情</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum nihil necessitatibus recusandae enim
                    vitae sit
                    ipsa, consequuntur distinctio maxime eum blanditiis nobis tempore labore ipsam fugiat ullam totam
                    expedita
                    quaerat?</p>
            </div>
            <div class="box bg-light">
                <!--   引入小图标 -->
                <i class="fa fa-graduation-cap fa-3x"></i>
                <h3>学员反馈</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum nihil necessitatibus recusandae enim
                    vitae sit
                    ipsa, consequuntur distinctio maxime eum blanditiis nobis tempore labore ipsam fugiat ullam totam
                    expedita
                    quaerat?</p>
            </div>
        </section>
        <div class="clr"></div>
        <footer id="main-footer">
            <p>米修在线 &copy; 2021, All Rights Reserved</p>
        </footer>
    </body>

</html>